<template>
	<view class="select-list-container">
		<view @click="handClick(item)" v-for="item in items" class="list-item">
			<view class="" style="display: flex;align-items: center;flex:1">
				<view><uni-icons :type="item.icon" size="26" ></uni-icons></view>
				<template v-if="!item.isContact">
					<view class="text">{{item.text}}</view>
				</template>
				<template v-if="item.isContact">
					<view class="text">
						
						<!-- #ifdef MP -->
						<button open-type="contact">
							
							联系客服
			
							</button>
						<!-- #endif -->
						
						<!-- #ifdef H5 -->
							<button @click="call" open-type="contact">
								
								拨打电话
										
								</button>
						<!-- #endif -->
				
					</view>
				</template>
			</view>
			
			<view style="display: flex;align-items: center;">{{item.number}} <uni-icons color="#aaa"  type="right" size="20"></uni-icons> </view>
		</view>
		
	</view>
</template>

<script lang="ts" setup>
	defineProps({
		items: Object as () => ({text: string, icon: string,number?:number,isContact:boolean}[]),
	})
 const emits = 	defineEmits(["clickItem"])
 
 function handClick(item:{text: string, icon: string,number?:number,isContact:boolean}){
	 emits('clickItem',item)
 }
 
 function call(){
	 uni.makePhoneCall({
	 	phoneNumber:'123456789'
	 })
 }
</script>

<style lang="scss" scoped>
.select-list-container{
	:deep(){
		.uni-icons{
			color:$brand-theme-color !important;
		}
	}
	width: 100%;
	// height: 100%;
	.list-item{
		padding: 15rpx 10rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid #eee;
	
		&:last-child{
			border-bottom: none;
		}
		.text{
			flex:1;
			color: #666;
			font-size: 28rpx;
		}
		button{
			text-align: left;
			padding: 0;
			background-color: transparent;
			border: none;
				font-size: 28rpx;
				color: #666;
		}
		button::after{
			content: none;
		}
	}
}
</style>